<template>
    <div class="default-main">
        <div class="banner">
            <el-row :gutter="10">
                <el-col :md="24" :lg="18">
                    <div class="welcome suspension">
                        <img class="welcome-img" :src="headerSvg" alt="" />
                        <div class="welcome-text">
                            <div class="welcome-title">{{ adminInfo.nickname + t('utils.comma') + getGreet() }}</div>
                            <div class="welcome-note">{{ state.remark }}</div>
                        </div>
                    </div>
                </el-col>
                <el-col :lg="6" class="hidden-md-and-down">
                    <div class="working">
                        <img class="working-coffee" :src="coffeeSvg" alt="" />
                        <div class="working-text">
                            {{ t('dashboard.You have worked today') }}<span class="time">{{ state.workingTimeFormat
                            }}</span>
                        </div>
                        <div @click="onChangeWorkState()" class="working-opt working-rest">
                            {{ state.pauseWork ? t('dashboard.Continue to work') : t('dashboard.have a bit of rest') }}
                        </div>
                    </div>
                </el-col>
            </el-row>
        </div>

        <!-- 基础数据面板 -->
        <div class="small-panel-box">
            <el-row :gutter="20">
                <!-- 市场总数 - 仅监管端可见 -->
                <el-col v-if="auth('admin')" :sm="12" :lg="6">
                    <div class="small-panel suspension user-reg">
                        <div class="small-panel-title">市场总数量</div>
                        <div class="small-panel-content">
                            <div class="content-left">
                                <Icon color="#8595F4" size="20" name="fa fa-shopping-cart" />
                                <el-statistic :value="countUp.marketTotal" :value-style="statisticValueStyle" />
                            </div>
                            
                        </div>
                    </div>
                </el-col>
                <!-- 商户总数 -->
                <el-col :sm="12" :lg="auth('admin') ? 6 : 8">
                    <div class="small-panel suspension file">
                        <div class="small-panel-title">商户总数量</div>
                        <div class="small-panel-content">
                            <div class="content-left">
                                <Icon color="#AD85F4" size="20" name="fa fa-desktop" />
                                <el-statistic :value="countUp.marketTotal" :value-style="statisticValueStyle" />
                            </div>
                            
                        </div>
                    </div>
                </el-col>
                <!-- 设备总数 -->
                <el-col :sm="12" :lg="auth('admin') ? 6 : 8">
                    <div class="small-panel suspension users">
                        <div class="small-panel-title">设备总数量</div>
                        <div class="small-panel-content">
                            <div class="content-left">
                                <Icon color="#74A8B5" size="20" name="fa fa-desktop" />
                                <el-statistic :value="countUp.deviceTotal" :value-style="statisticValueStyle" />
                            </div>
                            
                        </div>
                    </div>
                </el-col>
                <!-- 检定数量 -->
                <el-col :sm="12" :lg="auth('admin') ? 6 : 8">
                    <div class="small-panel suspension addons">
                        <div class="small-panel-title">检定数量</div>
                        <div class="small-panel-content">
                            <div class="content-left">
                                <Icon color="#F48595" size="20" name="fa fa-check-circle" />
                                <el-statistic :value="countUp.inspectionTotal" :value-style="statisticValueStyle" />
                            </div>
                             
                        </div>
                    </div>
                </el-col>
            </el-row>
        </div>

        <!-- 投诉数据面板 -->
        <div class="small-panel-box">
            <el-row :gutter="20">
                <el-col v-for="item in complaintPanels" :key="item.key" :sm="12" :lg="6">
                    <div class="small-panel suspension" :class="item.key">
                        <div class="small-panel-title">{{ item.title }}</div>
                        <div class="small-panel-content">
                            <div class="content-left">
                                <Icon :color="item.color" size="20" :name="item.icon" />
                                <el-statistic :value="item.output.value" :value-style="statisticValueStyle" />
                            </div>
                            
                        </div>
                    </div>
                </el-col>
            </el-row>
        </div>

        <!-- 市场端特定信息 -->
        <div v-if="auth('admin')" class="market-info-section">

            <el-row :gutter="20">
                <el-col :span="8">
                    <el-card shadow="hover" header="商品价格信息">
                        <div class="info-content">
                            <p>今日主要商品价格波动情况...</p>
                            <ul>
                                <li>猪肉: ￥25/kg (↑ 2%)</li>
                                <li>白菜: ￥3/kg (↓ 1%)</li>
                                <li>鸡蛋: ￥10/kg (-)</li>
                            </ul>
                        </div>
                    </el-card>
                </el-col>
                <el-dialog
                    title="详细"
                    v-model="news.dialogVisible"
                    width="60%">
                    <div style="padding: 5px;height: 500px;">
                          <h2>{{ news.details.title }}</h2>
                          <p style="padding-top: 10px;">{{ news.details.timestamp }}</p>
                          <p style="padding-top: 10px;" v-html="news.details.content"></p>
                    </div>
                </el-dialog>

                <el-col :span="8">
                    <el-card shadow="hover" header="信息动态">
                        <div class="info-content">
                            <el-scrollbar height="150px">
                                <a v-for="item in marketInfo.news" :key="item.id" class="news-item news_a" @click="showNewsDetail(item.id)" href="javascript:;">
                                    <el-tag size="small" type="success">{{ item.parameter.name }}</el-tag> {{ item.title }}
                                </a>
                            </el-scrollbar>
                        </div>
                    </el-card>
                </el-col>
                <el-col :span="8">
                    <el-card shadow="hover" header="智慧党建">
                        <div class="info-content">
                            <el-scrollbar height="150px">
                                <a v-for="item in marketInfo.dangjian" :key="item.id" class="news-item news_a" @click="showNewsDetail(item.id)" href="javascript:;">
                                    <el-tag size="small" type="primary">智慧党建</el-tag> {{ item.title }}
                                </a>
                            </el-scrollbar>
                        </div>
                        
                    </el-card>
                </el-col>
            </el-row>

            <el-row :gutter="20" style="margin-top: 20px;" v-if="!auth('admin')">
                <el-col :span="12">
                    <el-card shadow="hover" header="市场简介">
                        <div class="info-content">{{ marketInfo.introduction }}</div>
                    </el-card>
                </el-col>
                <el-col :span="12">
                    <el-card shadow="hover" header="市场平面图">
                        <el-image class="info-image" :src="marketInfo.floorPlanUrl" fit="contain"
                            :preview-src-list="marketInfo.floorPlanUrl ? [marketInfo.floorPlanUrl] : []"
                            preview-teleported hide-on-click-modal>
                            <template #error>
                                <div class="image-slot">
                                    <el-icon>
                                        <Picture />
                                    </el-icon>
                                    <span>暂无平面图</span>
                                </div>
                            </template>
                        </el-image>
                    </el-card>
                </el-col>
            </el-row>

        </div>

        <!-- 投诉图表与排名 -->
        <div class="growth-chart">
            <el-row :gutter="20">
                <!-- 市场投诉排名 - 仅监管端 -->
                <el-col v-if="auth('admin')" class="lg-mb-20" :xs="24" :sm="24" :md="12" :lg="9">
                    <el-card shadow="hover" :header="'市场投诉排名'">
                        <div class="market-complaint-chart" :ref="chartRefs.set"></div>
                    </el-card>
                </el-col>
                <!-- 投诉趋势图 - 两端 -->
                <el-col class="lg-mb-20" :xs="24" :sm="24" :md="12" :lg="auth('admin') ? 9 : 12">
                    <el-card shadow="hover" :header="'投诉趋势图'">
                        <div class="complaint-trend-chart" :ref="chartRefs.set"></div>
                    </el-card>
                </el-col>
                <!-- 商户投诉排名 - 两端 -->
                <el-col :xs="24" :sm="24" :md="24" :lg="auth('admin') ? 6 : 12">
                    <el-card class="merchant-complaint-card" shadow="hover" header="商户投诉排名">
                        <div class="merchant-complaint-list">
                            <el-scrollbar>
                                <div class="complaint-item" v-for="(item, index) in merchantComplaintList" :key="index">
                                    <div class="complaint-base">
                                        <div class="market-name">{{ item.merchant.name }}</div>
                                        <div class="merchant-name">{{ item.market_name }}</div>
                                    </div>
                                    <div class="complaint-count">{{ item.complaint_count }}</div>
                                </div>
                            </el-scrollbar>
                        </div>
                    </el-card>
                </el-col>
            </el-row>
        </div>

        <!-- 投诉量前十名商家 - 两端 -->
        <div class="top-complained-merchants" v-if="auth('admin') || auth('admin')">
            <el-card shadow="hover" header="投诉量前十的市场">
                <el-table :data="topComplainedMerchants" stripe style="width: 100%" height="200px">
                    <el-table-column type="index" label="排名" width="80" align="center" />
                    <el-table-column prop="market.name" label="市场名称" />
                    <el-table-column prop="complaint_count" label="投诉数量" align="center"/>
                </el-table>
            </el-card>
        </div>

        <!-- 监管端地图 与 预警分析 -->
        <div class="growth-chart" v-if="auth('admin') || auth('admin')">
            <el-row :gutter="20" class="growth-row">
                <!-- 市场分布图 - 仅监管端 -->
                <el-col v-if="auth('admin')" class="equal-height-col" :xs="24" :sm="24" :md="24" :lg="12">
                    <el-card shadow="hover" :header="'市场分布图'" class="equal-height-card">
                        <div class="market-map-chart">
                            <div id="container" style="height:100%; width:100%;"></div>
                        </div>
                    </el-card>
                </el-col>
                <!-- 预警分析 - 两端 -->
                <el-col class="equal-height-col" :xs="24" :sm="24" :md="24" :lg="auth('admin') ? 12 : 24">
                    <el-card shadow="hover" :header="'预警分析'" class="equal-height-card">
                        <el-tabs type="card">
                            <el-tab-pane label="设备预警">
                                <div class="device-warning">
                                    <div class="warning-title">设备鉴定到期预警 (剩余{{state.yujingDay}}天)</div>
                                    <el-table :data="deviceWarningList" style="width: 100%">
                                        <el-table-column prop="market_name" label="所属市场" width="180" />
                                        <el-table-column prop="merchant_name" label="所属商户" width="180" />
                                        <el-table-column prop="code" label="设备名称" width="180" />
                                        <el-table-column prop="remaining_days" label="剩余天数" align="center"/>
                                    </el-table>
                                </div>
                            </el-tab-pane>
                            <el-tab-pane label="交易量预警">
                                <div class="transaction-warning">
                                    <el-table :data="transactionWarningList" style="width: 100%">
                                        <el-table-column prop="market_name" label="市场名称" />
                                        <el-table-column prop="merchant_name" label="商户名称" />
                                        <el-table-column prop="code" label="均交易量" />
                                        <el-table-column prop="code" label="今日交易量" />
                                        <el-table-column prop="status" label="状态">
                                            <template #default="scope">
                                                <el-tag :type="scope.row.status === '正常' ? 'success' : 'danger'">{{
                                                    scope.row.status }}</el-tag>
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                </div>
                            </el-tab-pane>
                        </el-tabs>
                    </el-card>
                </el-col>
            </el-row>
        </div>




    </div>
</template>

<script setup lang="js">
import { auth } from '/@/utils/common' // 引入权限判断函数
import { useEventListener, useTemplateRefsList, useTransition, useResizeObserver } from '@vueuse/core' // 引入 VueUse 相关工具函数
import * as echarts from 'echarts' // 引入 ECharts
import { computed, nextTick, onActivated, onBeforeMount, onMounted, onUnmounted, reactive, ref, toRefs } from 'vue' // 引入 Vue 相关 API
import { useI18n } from 'vue-i18n' // 引入国际化
import { index as getDashboardData,showNews,apiChartData,deviceWarning,allMarket} from '/@/api/backend/dashboard' // 引入仪表盘 API (重命名为 getDashboardData 以明确用途)
import coffeeSvg from '/@/assets/dashboard/coffee.svg' // 引入 SVG 图片
import headerSvg from '/@/assets/dashboard/header-1.svg' // 引入 SVG 图片
import { useAdminInfo } from '/@/stores/adminInfo' // 引入管理员信息 store
import { WORKING_TIME } from '/@/stores/constant/cacheKey' // 引入本地存储 key
import { useNavTabs } from '/@/stores/navTabs' // 引入导航标签页 store
import { fullUrl, getGreet } from '/@/utils/common' // 引入通用工具函数
import { Local } from '/@/utils/storage' // 引入本地存储工具
import { Picture } from '@element-plus/icons-vue' // 引入 Element Plus 图标

let workTimer // 工作计时器 Interval ID

const d = new Date() // 当前日期
const { t } = useI18n() // 国际化函数实例
const navTabs = useNavTabs() // 导航标签页 store 实例
const adminInfo = useAdminInfo() // 管理员信息 store 实例
const chartRefs = useTemplateRefsList() // 用于获取模板中多个图表 DOM 元素的引用

let tencentMapScriptLoaded = false; // 标志，防止腾讯地图脚本多次加载
const news = reactive({
      'details':{},
      'dialogVisible':false
})
// 组件响应式状态
const state = reactive({
    charts: [], // 存储 ECharts 实例，用于后续操作（如 resize, dispose）
    remark: '欢迎使用市场监管综合管理系统', // 欢迎语备注，将由 API 更新
    workingTimeFormat: '', // 格式化的工作时间字符串
    pauseWork: false, // 标记工作计时器是否处于暂停状态
    yujingDay:15,  // 预警天数
    Markers:[]
})

// 用于数字过渡动画的基础数据
// 这些值将在 API 请求成功后更新
const countUp = reactive({
    marketTotal: 0, // 市场总数
    merchantTotal: 0, // 商户总数
    deviceTotal: 0, // 设备总数
    inspectionTotal: 0, // 检定总数
    complaintTotal: 0, // 投诉总数
    processingDone: 0, // 已处理投诉数
    todayComplaint: 0, // 今日投诉数
    todayProcessing: 0, // 今日处理投诉数
    completeComplaint:0  // 已处理
})

// 将 countUp 转换为 refs，以便 useTransition 可以监听其变化
const countUpRefs = toRefs(countUp)
// 使用 useTransition 创建数字过渡动画效果
// 当 countUpRefs 中的值变化时，这些 Output 会平滑过渡到新值
// TODO: AI对接 - 这些数值应通过调用 API (例如 getDashboardData) 获取，并更新 countUp 对象。
const marketTotalOutput = useTransition(countUpRefs.marketTotal, { duration: 1500 })
const merchantTotalOutput = useTransition(countUpRefs.merchantTotal, { duration: 1500 })
const deviceTotalOutput = useTransition(countUpRefs.deviceTotal, { duration: 1500 })
const inspectionTotalOutput = useTransition(countUpRefs.inspectionTotal, { duration: 1500 })
const complaintTotalOutput = useTransition(countUpRefs.complaintTotal, { duration: 1500 })
const processingDoneOutput = useTransition(countUpRefs.processingDone, { duration: 1500 })
const todayComplaintOutput = useTransition(countUpRefs.todayComplaint, { duration: 1500 })
const todayProcessingOutput = useTransition(countUpRefs.todayProcessing, { duration: 1500 })
const completeComplaintOutput = useTransition(countUpRefs.completeComplaint, { duration: 1500 })
// el-statistic 组件的数值样式配置
const statisticValueStyle = {
    fontSize: '28px',
}
const showNewsDetail = (id = 0) =>{
     news.dialogVisible = true
     showNews({'id':id}).then((res) => {
           console.log(res,"xxxx")
           news.details = res.data.row

     })
}
const getdeviceWarning = () =>{
    deviceWarning({'day':state.yujingDay,'trade_volume':10}).then((res) => {

            Object.assign(deviceWarningList, res.data.list);  //设备鉴定到期预警
            Object.assign(transactionWarningList,res.data.list_trade)

    })
}

// 投诉数据面板配置数组
// 将动态数据 (output) 和静态配置 (title, icon, color) 结合
// TODO: AI对接 - 面板数值 (complaintTotal, processingDone, etc.) 应通过 API 获取并更新 countUp 对象。
const complaintPanels = [
    { key: 'today-complaint', title: '待处理投诉数量', icon: 'fa fa-exclamation-circle', color: '#F44336', output: processingDoneOutput },
    { key: 'today-processed', title: '今日投诉数量', icon: 'fa fa-tasks', color: '#2196F3', output: todayComplaintOutput, trend: computed(() => todayComplaintOutput.value > 0 ? Math.round((todayProcessingOutput.value / todayComplaintOutput.value) * 100) + '%' : '0%') }, // 计算今日处理率
    { key: 'complaint', title: '投诉总数量', icon: 'fa fa-comments', color: '#FF9800', output: complaintTotalOutput },
    { key: 'processed', title: '已处理数量', icon: 'fa fa-check', color: '#4CAF50', output: completeComplaintOutput, trend: computed(() => complaintTotalOutput.value > 0 ? Math.round((completeComplaintOutput.value / complaintTotalOutput.value) * 100) + '%' : '0%') }, // 计算处理率
    

]

// 商户投诉排名列表 (响应式)
// TODO: AI对接 - 应通过 API (例如 '/api/dashboard/merchant-complaints?limit=5') 获取数据并更新此列表。
const merchantComplaintList = reactive([])

// 设备到期预警列表 (响应式)
// TODO: AI对接 - 应通过 API (例如 '/api/dashboard/device-warnings?days=15') 获取数据并更新此列表。
const deviceWarningList = reactive([])

// 交易量预警列表 (响应式)
// TODO: AI对接 - 应通过 API (例如 '/api/dashboard/transaction-warnings') 获取数据并更新此列表。
const transactionWarningList = reactive([
    // 示例静态数据，将被 API 数据替换
    { marketName: '第一市场', merchantName: '鲜果商行', avgTransaction: 5000, todayTransaction: 4200, status: '正常' },
    { marketName: '中央市场', merchantName: '海鲜批发', avgTransaction: 8000, todayTransaction: 3500, status: '异常' },
    { marketName: '南方市场', merchantName: '日用百货', avgTransaction: 6000, todayTransaction: 5800, status: '正常' },
    { marketName: '北方市场', merchantName: '肉类批发', avgTransaction: 7500, todayTransaction: 2800, status: '异常' }
])

// 市场信息 (响应式，仅市场端 'admin' 可见)
// TODO: AI对接 - 应根据当前登录的市场管理员，通过 API (例如 '/api/market/details/:marketId') 获取数据并更新此对象。
const marketInfo = reactive({
    introduction: '欢迎来到[市场名称]！本市场成立于20XX年，占地面积XX平方米，拥有超过XXX个摊位，主要经营范围包括新鲜蔬菜、时令水果、生鲜肉类、海鲜水产、粮油副食及日用百货等。我们致力于为广大市民提供一个安全、卫生、便捷、舒适的购物环境，确保商品质量，维护市场秩序。', // 示例简介
    floorPlanUrl: '', // 市场平面图 URL - TODO: AI对接 - 获取市场平面图 URL
    news: [],
    dangjian:[]
    // TODO: AI对接 - 添加商品价格信息和智慧党建信息的字段和获取逻辑
})

// 投诉量前十商家 (响应式)
// TODO: AI对接 - 应通过 API (例如 '/api/dashboard/top-complained-merchants?limit=10') 获取数据并更新此列表。
const topComplainedMerchants = reactive([])

// 获取仪表盘核心数据
// TODO: AI对接 - 扩展此 API 调用以获取所有面板、列表和图表所需的数据，或进行多次调用。
const fetchData = () => {
    getDashboardData().then((res) => {
        // 更新欢迎语备注
        state.remark = res.data.remark || '欢迎使用市场监管综合管理系统';
        // TODO: AI对接 - 使用 res.data 中的数据更新以下内容: 
        // 1. 更新 countUp 对象 (marketTotal, merchantTotal, etc.)
        countUp.marketTotal = res.data.summary.marketTotal ?? 0;
        countUp.merchantTotal = res.data.summary.merchantTotal ?? 0;
        countUp.deviceTotal = res.data.summary.deviceTotal ?? 0;
        countUp.inspectionTotal = res.data.summary.inspectionTotal ?? 0; //检定总数
        countUp.complaintTotal = res.data.summary.complaintTotal ?? 0; //投诉总数
        countUp.processingDone = res.data.summary?.processingDone ?? 0; //待处理投诉总数
        countUp.todayComplaint = res.data.summary?.todayComplaint ?? 0; // 今日投诉数
        countUp.todayProcessing = res.data.summary?.todayProcessing ?? 0; // 今日待处理
        countUp.completeComplaint = res.data.summary?.completeComplaint ?? 0; // 今日待处理

        marketInfo.news = res.data.news
        marketInfo.dangjian = res.data.news_dangjian

        // 2. 更新商户排行 merchantComplaintList
        if (res.data.merchant_complaint_rank) {
            merchantComplaintList.length = 0; 
            Object.assign(merchantComplaintList, res.data.merchant_complaint_rank);
        }
        // 5. 更新市场排行 topComplainedMerchants (原 topComplainedCommodities)
        if (res.data.market_complaint_rank) { // 假设API返回字段为 topMerchants
            topComplainedMerchants.length = 0;
            Object.assign(topComplainedMerchants, res.data.market_complaint_rank);
        }

        getdeviceWarning()

 
        // 4. 更新交易量预警transactionWarningList
        if (res.data.transactionWarnings) {
            transactionWarningList.length = 0;
            Object.assign(transactionWarningList, res.data.transactionWarnings);
        }


        // 6. 如果是市场端，更新 marketInfo
        if (auth('admin') && res.data.marketDetails) {
            Object.assign(marketInfo, res.data.marketDetails);
        }

        // 初始化或更新图表和地图
        // 7. 更新图表数据 (图表初始化函数现在会接收数据)
        initializeChartsAndMap(res.data.market_complaint_rank);

    }).catch(error => {
        console.error("获取仪表盘数据失败:", error);
        // 处理错误，例如显示提示信息
        // 可以设置默认值或显示错误状态
        initializeChartsAndMap(); // 即使数据失败，也尝试初始化图表（可能显示无数据状态）
    });
}


// 初始化 ECharts 图表和地图
// 这个函数会在数据获取成功或失败后被调用
const initializeChartsAndMap = (chartsData = {}) => {
    nextTick(() => { // 确保 DOM 元素已准备好
        if (auth('admin')) { // 监管端权限
            console.log(chartsData,"zzzzz")
            initMarketComplaintChart(chartsData); //市场投诉排名趋势图
            initMarketMapChart(); // 调用地图初始化
        }
        apiChartData({}).then((res) => {
             initComplaintTrendChart(res.data);  //近期投诉趋势图
        })
        
    });
}


// 初始化市场投诉排名图表 (监管端)
const initMarketComplaintChart = (data) => {
    // TODO: AI对接 - 使用传入的 data 替换下面的静态示例数据
    const chartData = {
        categories: [], // 示例 Y 轴数据
        values: [] // 示例 X 轴数据
    };
    data.reverse(); // 直接反转原数组
    for(var i=0;i<data.length;i++){
        chartData.categories.push(data[i].market.name)
        chartData.values.push(data[i].complaint_count)
    }
    const chartElement = chartRefs.value[0]; // 获取图表容器 DOM
    if (!chartElement) return; // 确保元素存在
    const marketComplaintChart = echarts.init(chartElement);
    const option = {
        tooltip: { // 提示框组件
            trigger: 'axis', // 坐标轴触发
            axisPointer: { // 坐标轴指示器配置
                type: 'shadow' // 阴影指示器
            }
        },
        grid: { // 图表网格配置，调整边距防止标签溢出
            top:"3%",
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true // grid 区域是否包含坐标轴的刻度标签
        },
        xAxis: { // X 轴配置
            type: 'value', // 数值轴
            boundaryGap: [0, 0.01] // 坐标轴两边留白策略
        },
        yAxis: { // Y 轴配置
            type: 'category', // 类目轴
            data: chartData.categories // Y 轴类目数据
        },
        series: [ // 系列列表
            {
                name: '投诉量', // 系列名称，用于 tooltip 显示
                type: 'bar', // 图表类型：柱状图
                data: chartData.values, // 系列数据
                itemStyle: { // 图形样式
                    color: '#FF9800' // 柱条颜色
                }
            }
        ]
    };
    marketComplaintChart.setOption(option); // 设置图表配置项
    state.charts.push(marketComplaintChart); // 将图表实例存入 state，用于 resize 和 dispose
}

// 初始化投诉趋势图表 (两端)
// data: 从 API 获取的图表数据
const initComplaintTrendChart = (data) => {
    console.log(data.date,'xxxxxxxxxxxx')  //我的时间规划好了，月底我就开始上抖音
    // TODO: AI对接 - 使用传入的 data 替换下面的静态示例数据
    const defaultChartData = {
        categories:data.date, // 示例 X 轴数据
        complaintValues: data.complaint, // 示例投诉数据
        processedValues: data.complaint_success // 示例处理数据
    };


    const chartData =  defaultChartData;

    const chartIndex = auth('admin') ? 1 : 0; // 根据权限确定图表在 chartRefs 中的索引
    const chartElement = chartRefs.value[chartIndex]; // 获取图表容器 DOM
    if (!chartElement) return; // 确保元素存在

    const complaintTrendChart = echarts.init(chartElement);
    const option = {
        tooltip: { // 提示框组件
            trigger: 'axis' // 坐标轴触发
        },
        legend: { // 图例组件
            data: ['投诉数', '处理数'] // 图例数据数组
        },
        grid: { // 图表网格配置
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: { // X 轴配置
            type: 'category', // 类目轴
            boundaryGap: false, // 类目轴两边不留白
            data: chartData.categories // X 轴类目数据
        },
        yAxis: { // Y 轴配置
            type: 'value' // 数值轴
        },
        series: [ // 系列列表
            {
                name: '投诉数', // 系列名称
                type: 'line', // 图表类型：折线图
                // stack: '总量', // 数据堆叠，可选
                data: chartData.complaintValues, // 系列数据
                itemStyle: { color: '#F44336' }, // 线条颜色
                areaStyle: {} // 区域填充样式，可选
            },
            {
                name: '处理数', // 系列名称
                type: 'line', // 图表类型：折线图
                // stack: '总量', // 数据堆叠，可选
                data: chartData.processedValues, // 系列数据
                itemStyle: { color: '#2196F3' }, // 线条颜色
                areaStyle: {} // 区域填充样式，可选
            }
        ]
    };
    complaintTrendChart.setOption(option); // 设置图表配置项
    state.charts.push(complaintTrendChart); // 将图表实例存入 state
}

// --- 地图初始化逻辑 ---

// 定义 initMap 为全局函数，供腾讯地图API回调
window.initMap = () => {


    allMarket({}).then((res) => {


        const mapContainer = document.getElementById('container');
        if (!mapContainer) {
            console.error("地图容器 'container' 未找到。");
            return;
        }
        // 防止在同一容器上重复初始化
        if (mapContainer._tencentMapInstance) {
            return;
        }

        //定义地图中心点坐标
        var center = new TMap.LatLng(31.867061, 117.295100);
        //定义map变量，调用 TMap.Map() 构造函数创建地图
        var map = new TMap.Map(mapContainer, {
            center: center, //设置地图中心点坐标
            zoom:12,   //设置地图缩放级别
        });
        console.log("index2222")
        const markers = []
        var all_market = res.data.list
        for(var i=0;i<all_market.length;i++){
               markers.push({
                    id:'marker'+i,
                    position:new TMap.LatLng(all_market[i].lon,all_market[i].lat),
                    properties:{
                         title:all_market[i].name
                    }

               });
        }
        // 创建 MultiMarker
        new TMap.MultiMarker({
            map: map,
            geometries: markers,
            styles: {
                
            }
        });


    })

        


    // mapContainer._tencentMapInstance = map; // 存储实例，标记已初始化
    // TODO: AI对接 - 在此处添加地图标记点等逻辑, 例如使用 API 返回的 mapMarketData
    // console.log('腾讯地图初始化完成:', map, mapMarketData);
};

const loadScript = () => {
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src = "https://map.qq.com/api/gljs?v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77&callback=initMap"; // 使用你的Key
    document.body.appendChild(script);
};

const initMarketMapChart = () => {
    if (!document.getElementById('container')) {
        // 容器可能还未渲染，尤其是在 nextTick 中调用时，应确保其存在
        console.warn("地图容器 'container' 尚未在DOM中准备好。");
        // 可以选择稍后重试或确保调用时DOM已完全可用
        return;
    }
    if (window.TMap && window.TMap.Map) {
        // 如果TMap已加载，直接尝试初始化 (可能在热更新或重复调用时发生)
        if (typeof window.initMap === 'function') {
            window.initMap();
        }
        return;
    }
    if (!tencentMapScriptLoaded) {
        loadScript();
        tencentMapScriptLoaded = true;
    } else {
        // 脚本已加载但 TMap 可能还未完全准备好，或者 initMap 未被正确触发
        // 这种情况下，如果 initMap 已经定义，可以尝试手动调用
        if (typeof window.initMap === 'function' && !document.getElementById('container')._tencentMapInstance) {
              console.log("尝试再次调用 initMap，因为脚本已加载但地图未初始化。");
             // window.initMap(); // 谨慎调用，确保不会导致问题
        }
    }
};
// --- 地图初始化逻辑结束 ---

// --- 工作计时器逻辑 ---
// 切换工作状态 (开始/暂停计时)
const onChangeWorkState = () => {
    // ... existing code ...
}

// 开始工作计时
const startWork = () => {
    // ... existing code ...
}

// 将秒数格式化为 xx天xx小时xx分xx秒
const formatSeconds = (seconds) => {
    // ... existing code ...
}
// --- 工作计时器逻辑结束 ---

// --- ECharts 响应式调整 ---
// ECharts 图表响应式调整大小函数
const echartsResize = () => {
    nextTick(() => { // 确保在 DOM 更新后执行
        state.charts.forEach(chart => { // 遍历所有图表实例
            if (chart && typeof chart.resize === 'function') {
                chart.resize(); // 调用 ECharts 实例的 resize 方法
            }
        });
    });
}

// --- Vue 生命周期钩子 ---
// 组件被 keep-alive 缓存激活时调用
onActivated(() => {
    echartsResize(); // 重新调整图表大小，防止因隐藏再显示导致的大小问题
})

// 组件挂载后执行
onMounted(() => {
    startWork(); // 开始工作计时
    fetchData(); // 获取仪表盘数据并初始化图表/地图

    // 监听窗口大小变化事件，用于调整图表大小
    useEventListener(window, 'resize', echartsResize);

    // 使用 ResizeObserver 更精确地监听图表容器大小变化
    nextTick(() => {
        chartRefs.value.forEach(el => {
            if (el) {
                useResizeObserver(el, echartsResize);
            }
        });
    });
})

// 组件卸载前执行
onBeforeMount(() => {
    // 销毁 ECharts 实例，释放资源
    state.charts.forEach(chart => {
        if (chart && typeof chart.dispose === 'function') {
            chart.dispose();
        }
    });
    state.charts = []; // 清空数组
})

// 组件卸载后执行
onUnmounted(() => {
    clearInterval(workTimer); // 清除工作计时器
    // 移除窗口 resize 监听器 (useEventListener 会自动处理)
    // 清理地图实例和全局回调（如果适用）
    const mapContainer = document.getElementById('container');
    if (mapContainer && mapContainer._tencentMapInstance) {
        // 腾讯地图没有标准的 destroy 方法，但可以移除DOM和相关引用
        // mapContainer._tencentMapInstance = null; // 清除引用
    }
    if (window.initMap) {
        // delete window.initMap; // 在组件卸载时移除全局函数，如果不再需要
    }
    tencentMapScriptLoaded = false; // 重置加载标志
})
</script>

<style scoped lang="scss">
.news_a{
    display: block;
    color:#606266;
    text-decoration: none;
}
.news_a:hover{
    text-decoration: underline;
}
.default-main {
    padding: 20px;
    background-color: var(--el-bg-color-base);
    box-sizing: border-box;
    margin: 0;
}

.welcome {
    background: #e1eaf9;
    box-sizing: border-box;
    border-radius: 6px;
    display: flex;
    align-items: center;
    padding: 15px 20px !important;
    box-shadow: 0 0 30px 0 rgba(82, 63, 105, 0.05);

    .welcome-img {
        height: 100px;
        margin-right: 10px;
        user-select: none;
    }

    .welcome-title {
        font-size: 1.5rem;
        line-height: 30px;
        color: var(--ba-color-primary-light);
    }

    .welcome-note {
        padding-top: 6px;
        font-size: 15px;
        color: var(--el-text-color-primary);
    }
}

.working {
    height: 130px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    height: 100%;
    position: relative;

    &:hover {
        .working-coffee {
            -webkit-transform: translateY(-4px) scale(1.02);
            -moz-transform: translateY(-4px) scale(1.02);
            -ms-transform: translateY(-4px) scale(1.02);
            -o-transform: translateY(-4px) scale(1.02);
            transform: translateY(-4px) scale(1.02);
            z-index: 999;
        }
    }

    .working-coffee {
        transition: all 0.3s ease;
        width: 80px;
    }

    .working-text {
        display: block;
        width: 100%;
        font-size: 15px;
        text-align: center;
        color: var(--el-text-color-primary);
    }

    .working-opt {
        position: absolute;
        top: -40px;
        right: 10px;
        background-color: rgba($color: #000000, $alpha: 0.3);
        padding: 10px 20px;
        border-radius: 20px;
        color: var(--ba-bg-color-overlay);
        transition: all 0.3s ease;
        cursor: pointer;
        opacity: 0;
        z-index: 999;

        &:active {
            background-color: rgba($color: #000000, $alpha: 0.6);
        }
    }

    &:hover {
        .working-opt {
            opacity: 1;
            top: 0;
        }
    }
}

.small-panel-box {
    margin-top: 20px;
}

.small-panel {
    background-color: #e9edf2;
    border-radius: var(--el-border-radius-base);
    padding: 25px;

    .small-panel-title {
        color: #92969a;
        font-size: 15px;
    }

    .small-panel-content {
        display: flex;
        align-items: flex-end;
        margin-top: 20px;
        color: #2c3f5d;

        .content-left {
            display: flex;
            align-items: center;
            font-size: 24px;

            .icon {
                margin-right: 10px;
            }
        }

        .content-right {
            font-size: 18px;
            margin-left: auto;
        }

        .color-success {
            color: var(--el-color-success);
        }

        .color-warning {
            color: var(--el-color-warning);
        }

        .color-danger {
            color: var(--el-color-danger);
        }

        .color-info {
            color: var(--el-text-color-secondary);
        }
    }
}

.growth-chart {
    margin-bottom: 20px;
    margin-top: 20px;

    .growth-row {
        display: flex;
        align-items: stretch;
    }

    .equal-height-col {
        display: flex;
        flex-direction: column;
    }

    .equal-height-card {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        height: 100%;
    }
}

.market-complaint-chart,
.complaint-trend-chart {
    height: 300px;
}

.market-map-chart {
    flex: 1 1 auto;
    height: 400px;
    min-height: 400px;

    >* {
        height: 100% !important;
        width: 100% !important;
    }
}

.merchant-complaint-list {
    height: 300px;

    .complaint-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 15px 20px;
        margin: 10px 5px;
        background-color: var(--ba-bg-color-overlay);
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        border-radius: 4px;

        .complaint-base {
            .market-name {
                font-size: 14px;
                font-weight: bold;
                margin-bottom: 5px;
            }

            .merchant-name {
                font-size: 12px;
                color: #666;
            }
        }

        .complaint-count {
            font-size: 18px;
            font-weight: bold;
            color: #FF9800;
        }
    }
}

.device-warning {
    .warning-title {
        font-size: 16px;
        font-weight: bold;
        margin-bottom: 15px;
        color: #F44336;
    }
}

.market-info-section {
    margin-top: 20px;
    margin-bottom: 20px;

    .info-content {
        height: 150px;
        overflow-y: auto;
        font-size: 14px;
        line-height: 1.6;
        color: var(--el-text-color-regular);

        ul {
            padding-left: 20px;
            margin-top: 10px;
        }

        .news-item {
            margin-bottom: 8px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;

            .el-tag {
                margin-right: 5px;
            }
        }
    }

    .info-image {
        height: 150px;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #f5f7fa;
        color: var(--el-text-color-placeholder);

        .image-slot {
            display: flex;
            flex-direction: column;
            align-items: center;
            font-size: 14px;

            .el-icon {
                font-size: 30px;
                margin-bottom: 5px;
            }
        }
    }

    :deep(.el-card__header) {
        padding: 10px 15px;
    }

    :deep(.el-card__body) {
        padding: 15px;
    }
}

.top-complained-merchants {
    margin-top: 20px;
    margin-bottom: 20px;

    :deep(.el-table th.el-table__cell) {
        background-color: var(--el-fill-color-light);
    }
}

@media screen and (max-width: 425px) {
    .welcome-img {
        display: none;
    }
}

@media screen and (max-width: 1200px) {
    .lg-mb-20 {
        margin-bottom: 20px;
    }

    .growth-chart .growth-row {
        flex-direction: column;
    }

    .market-map-chart {
        height: 300px;
        min-height: 300px;
    }
}

html.dark {
    .welcome {
        background-color: var(--ba-bg-color-overlay);
    }

    .small-panel {
        background-color: var(--ba-bg-color-overlay);

        .small-panel-content {
            color: var(--el-text-color-regular);
        }
    }

    .complaint-item {
        background-color: var(--ba-bg-color-overlay);
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    }

    .market-info-section .info-image {
        background-color: var(--el-fill-color-darker);
        color: var(--el-text-color-secondary);
    }
}
</style>